<template>
  <div id="courseCircleCard">
    <!-- 路由连接 -->
    <router-link :to="item.link">
      <div style="background-color:#fff;margin-bottom:20px;">
        <div style="postion:absolute;">
          <!-- 卡片顶部图片 -->
          <img :src="item.titleimg" class="imgURLclass" />
          <!-- 多少课时,是否更新完毕的小图标 -->
          <p class="courseTip">{{item.coursenumber}}课程 | {{item.result}}</p>
        </div>
        <div class="price">
          <!-- 限时图标是否显示 -->
          <span class="icon" v-show="item.icon">限时</span>
          <!-- 折扣价钱 -->
          <span class="new_preice">¥{{item.new_price.$numberDecimal}}</span>
          <!-- 没折扣的价钱 -->
          <span class="old_preice">{{item.old_price.$numberDecimal}}</span>

          <span class="person_number">
            <!-- 加入人数和小图标 -->
            <van-icon name="contact" />
            {{item.personnumber}}人已加入学习
          </span>
        </div>
      </div>
    </router-link>
  </div>
</template>

<script>
//导入vue
import Vue from "vue";
//vant图标导入
import { Icon } from "vant";
//注册组件
Vue.use(Icon);

//保留2位小数的过滤器
// Vue.filter("formatDouble", value => {
//   return value.$numberDecimal;
// });

export default {
  name: "courseCircleCard",
  components: {},
  //属性传入
  props: ["item"],
  data() {
    return {};
  },
  computed: {},
  watch: {},
  methods: {},
  created() {},
  mounted() {},
  beforeCreate() {}, //生命周期 - 创建之前
  beforeMount() {}, //生命周期 - 挂载之前
  beforeUpdate() {}, //生命周期 - 更新之前
  updated() {}, //生命周期 - 更新之后
  beforeDestroy() {}, //生命周期 - 销毁之前
  destroyed() {}, //生命周期 - 销毁完成
  activated() {} //如果页面有keep-alive缓存功能，这个函数会触发
};
</script>
<style scoped>
/* 局部样式修改 */
.imgURLclass {
  width: 100%;
  height: 100%;
  border-radius: 0px;
  border-top-left-radius: 4px;
  border-top-right-radius: 4px;
  object-fit: "cover";
}

.courseTip {
  border-radius: 10px 0 0 10px;
  background-color: #f5a623;
  font-size: 12px;
  color: #fff;
  font-family: PingFangSC-Regular;
  position: relative;
  bottom: 23px;
  display: block;
  height: 20px;
  line-height: 20px;
  float: right;
  padding: 0 5px;
}
.price {
  height: 67px;
  padding: 24px 18px;
}
.new_preice {
  margin-left: 3px;
  font-size: 17px;
  color: #f5a623;
}
.old_preice {
  font-size: 14px;
  color: #9b9b9b;
  text-decoration: line-through;
}
.person_number {
  float: right;
  font-size: 10px;
  color: #9b9b9b;
}
.icon {
  color: #ff6b43;
  font-size: 10px;
  border: 1px solid #ff6b43;
  border-radius: 2px;
}
</style>